<template>
	<view class="customer-service-list">
		<!-- 操作栏 -->
		<view class="action-bar">
			<button class="btn btn-primary" @click="showCreateServiceModal">添加客服</button>
			<view class="search-box">
				<input
					type="text"
					v-model="searchKeyword"
					placeholder="输入客服工号搜索"
					@input="debounceSearch"
					@confirm="searchNow"
				/>
				<text class="search-btn" @click="searchNow">搜索</text>
				<text class="clear-btn" v-if="searchKeyword" @click="clearSearch">×</text>
			</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item">
				<text class="filter-label">客服类型：</text>
				<view class="filter-options">
					<view 
						class="filter-option" 
						:class="{ active: serviceType === '' }"
						@click="setServiceType('')"
					>全部</view>
					<view 
						class="filter-option" 
						:class="{ active: serviceType === 'HUMAN' }"
						@click="setServiceType('HUMAN')"
					>人工</view>
					<view 
						class="filter-option" 
						:class="{ active: serviceType === 'AI' }"
						@click="setServiceType('AI')"
					>机器人</view>
				</view>
			</view>
		</view>
		
		<!-- 客服列表 -->
		<view class="service-table">
			<view class="table-header">
				<view class="th">客服工号</view>
				<view class="th">类型</view>
				<view class="th">状态</view>
				<view class="th">当前会话</view>
				<view class="th">最大会话</view>
				<view class="th">技能标签</view>
				<view class="th">操作</view>
			</view>
			
			<view class="table-body">
				<view class="tr" v-for="(service, index) in serviceList" :key="index">
					<view class="td">{{ service.serviceCode }}</view>
					<view class="td">{{ service.serviceType === 'HUMAN' ? '人工' : '机器人' }}</view>
					<view class="td">
						<view class="status-badge" :class="getStatusClass(service.serviceStatus)">
							{{ getStatusText(service.serviceStatus) }}
						</view>
					</view>
					<view class="td">{{ service.currentSessions }}</view>
					<view class="td">{{ service.maxConcurrent }}</view>
					<view class="td">
						<view class="skill-tags">
							<view class="skill-tag" v-for="(skill, i) in getSkillList(service.skills)" :key="i">
								{{ skill }}
							</view>
						</view>
					</view>
					<view class="td">
						<view class="action-btns">
							<button class="btn btn-small btn-edit" @click="editService(service)">编辑</button>
							<button class="btn btn-small btn-delete" @click="confirmDeleteService(service)">删除</button>
							<button 
								class="btn btn-small" 
								:class="service.serviceStatus === 'ONLINE' ? 'btn-warning' : 'btn-success'"
								@click="toggleServiceStatus(service)"
							>
								{{ service.serviceStatus === 'ONLINE' ? '置为离线' : '置为在线' }}
							</button>
						</view>
					</view>
				</view>
				
				<view class="tr empty-row" v-if="serviceList.length === 0">
					<view class="td" colspan="7">暂无数据</view>
				</view>
			</view>
		</view>
		
		<!-- 分页组件 -->
		<view class="pagination">
			<view class="pagination-info">
				共 {{ pagination.total }} 条记录，当前第 {{ pagination.current }}/{{ pagination.pages }} 页
			</view>
			<view class="pagination-buttons">
				<button 
					class="btn pagination-btn" 
					:class="{ disabled: pagination.current <= 1 }"
					@click="changePage(pagination.current - 1)"
				>上一页</button>
				<view 
					v-for="page in getPageNumbers()" 
					:key="page"
					class="page-number"
					:class="{ active: page === pagination.current }"
					@click="changePage(page)"
				>{{ page }}</view>
				<button 
					class="btn pagination-btn" 
					:class="{ disabled: pagination.current >= pagination.pages }"
					@click="changePage(pagination.current + 1)"
				>下一页</button>
			</view>
		</view>
		
		<!-- 创建/编辑客服模态框 -->
		<view class="modal" v-if="showModal">
			<view class="modal-mask" @click="cancelModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<view class="modal-title">{{ isEdit ? '编辑客服' : '添加客服' }}</view>
					<view class="modal-close" @click="cancelModal">×</view>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<view class="form-label">客服工号</view>
						<input class="form-input" type="text" v-model="formData.serviceCode" placeholder="请输入客服工号" />
					</view>
					
					<view class="form-item">
						<view class="form-label">客服类型</view>
						<view class="form-radio-group">
							<view class="form-radio" :class="{ 'active': formData.serviceType === 'HUMAN' }" @click="formData.serviceType = 'HUMAN'">
								<radio :checked="formData.serviceType === 'HUMAN'" color="#4481eb" />
								<text>人工客服</text>
							</view>
							<view class="form-radio" :class="{ 'active': formData.serviceType === 'AI' }" @click="formData.serviceType = 'AI'">
								<radio :checked="formData.serviceType === 'AI'" color="#4481eb" />
								<text>机器人客服</text>
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-label">最大会话数</view>
						<input class="form-input" type="number" v-model="formData.maxConcurrent" placeholder="请输入最大会话数" />
					</view>
					
					<view class="form-item">
						<view class="form-label">客服分组</view>
						<view class="form-select" @click="showGroupSelector = true">
							<view class="picker-view">
								{{ getSelectedGroupName() || '请选择客服分组' }}
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="form-label">技能标签</view>
						<input class="form-input" type="text" v-model="formData.skills" placeholder="请输入技能标签，用逗号分隔" />
					</view>
					
					<view class="form-item">
						<view class="form-label">关联用户ID</view>
						<view class="form-select">
							<view class="picker-view" @click="showUserSelector = true">
								{{ getUserDisplayName() || '请选择用户' }}
							</view>
							<button class="btn btn-small btn-primary add-group-btn" @click.stop="refreshUserList">↻</button>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn btn-default" @click="cancelModal">取消</button>
					<button class="btn btn-primary" @click="submitForm">确定</button>
				</view>
			</view>
		</view>
		
		<!-- 分组选择弹窗 -->
		<view class="modal" v-if="showGroupSelector">
			<view class="modal-mask" @click="showGroupSelector = false"></view>
			<view class="modal-content group-selector">
				<view class="modal-header">
					<view class="modal-title">选择分组</view>
					<view class="modal-close" @click="showGroupSelector = false">×</view>
				</view>
				<view class="modal-body">
					<view class="group-actions">
					<input class="form-input" type="text" v-model="searchGroupKeyword" placeholder="搜索分组" @input="debounceGroupSearch" />
						<button class="btn btn-small btn-primary add-group-btn" @click="showCreateGroupModal">新建分组</button>
					</view>
					<view class="group-list">
						<view v-for="group in filteredGroupList" :key="group.id" class="group-item" @click="selectGroup(group)">
							{{ group.groupName }}
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn btn-default" @click="showGroupSelector = false">取消</button>
				</view>
			</view>
		</view>
		
		<!-- 创建分组模态框 -->
		<view class="modal" v-if="showCreateGroupModal">
			<view class="modal-mask" @click="cancelCreateGroup"></view>
			<view class="modal-content">
				<view class="modal-header">
					<view class="modal-title">创建分组</view>
					<view class="modal-close" @click="cancelCreateGroup">×</view>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<view class="form-label">分组名称</view>
						<input class="form-input" type="text" v-model="newGroupForm.groupName" placeholder="请输入分组名称" />
					</view>
					<view class="form-item">
						<view class="form-label">分组描述</view>
						<textarea class="form-textarea" v-model="newGroupForm.description" placeholder="请输入分组描述"></textarea>
					</view>
					<view class="form-item">
						<view class="form-label">优先级</view>
						<input class="form-input" type="number" v-model="newGroupForm.priority" placeholder="请输入优先级" />
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn btn-default" @click="cancelCreateGroup">取消</button>
					<button class="btn btn-primary" @click="submitCreateGroup">确定</button>
				</view>
			</view>
		</view>
		
		<!-- 用户选择器模态框 -->
		<view class="modal" v-if="showUserSelector">
			<view class="modal-mask" @click="showUserSelector = false"></view>
			<view class="modal-content user-selector">
				<view class="modal-header">
					<view class="modal-title">选择用户</view>
					<view class="modal-close" @click="showUserSelector = false">×</view>
				</view>
				<view class="modal-body">
					<view class="search-box user-search-box">
						<input 
							type="text" 
							v-model="searchUserKeyword" 
							placeholder="搜索用户" 
							@input="debounceUserSearch"
							@confirm="searchUsers" 
						/>
						<text class="search-btn" @click="searchUsers">搜索</text>
					</view>
					
					<view class="user-list">
						<view class="empty-message" v-if="userList.length === 0">
							暂无用户数据
						</view>
						<view 
							v-for="(user, index) in userList" 
							:key="user.id" 
							class="user-item"
							@click="selectUser(user)"
						>
							<view class="user-avatar">{{ getUserInitials(user) }}</view>
							<view class="user-info">
								<view class="user-name">{{ user.username }}</view>
								<view class="user-email">{{ user.email }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn btn-default" @click="showUserSelector = false">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../api/index.js';
	
	export default {
		name: 'CustomerServiceList',
		data() {
			return {
				serviceList: [],
				searchKeyword: '',
				serviceType: '',
				pagination: {
					current: 1,
					size: 10,
					total: 0,
					pages: 0
				},
				showModal: false,
				isEdit: false,
				formData: {
					id: null,
					serviceCode: '',
					serviceType: 'HUMAN',
					maxConcurrent: 5,
					groupId: '',
					skills: '',
					userId: ''
				},
				originalFormData: null,
				searchTimer: null,
				groupList: [],
				showGroupSelector: false,
				newGroupName: '',
				userList: [],
				showUserSelector: false,
				searchUserKeyword: '',
				searchGroupKeyword: '',
				showCreateGroupModal: false,
				newGroupForm: {
					groupName: '',
					description: '',
					priority: 1
				}
			}
		},
		computed: {
			filteredGroupList() {
				if (!this.searchGroupKeyword) return this.groupList;
				return this.groupList.filter(g => g.groupName.includes(this.searchGroupKeyword));
			},
		},
		mounted() {
			this.loadServicePage();
			this.loadGroupList();
			this.loadUserList();
		},
		methods: {
			// 分页加载客服列表
			async loadServicePage() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const { current, size } = this.pagination;
					
					// 构建请求参数
					const params = {
						current, 
						size
					};
					
					console.log('搜索关键词:', this.searchKeyword, '类型:', typeof this.searchKeyword);
					console.log('筛选类型:', this.serviceType, '类型:', typeof this.serviceType);
					
					// 只有在有值时才添加搜索和筛选参数
					if (this.searchKeyword && this.searchKeyword.trim()) {
						params.keyword = this.searchKeyword.trim();
						console.log('设置 keyword 参数:', params.keyword);
					}
					
					if (this.serviceType) {
						params.serviceType = this.serviceType;
						console.log('设置 serviceType 参数:', params.serviceType);
					}
					
					console.log('Loading service page with params:', JSON.stringify(params));
					const response = await api.customerService.getServicePage(params);
					
					console.log('服务器响应数据:', JSON.stringify(response));
					
					if (response && response.data) {
						this.serviceList = response.data.list || [];
						this.pagination = {
							current: response.data.current || 1,
							size: response.data.size || 10,
							total: response.data.total || 0,
							pages: response.data.pages || 1
						};
						
						const isFiltering = this.searchKeyword || this.serviceType;
						
						// 如果筛选/搜索后列表为空，显示提示
						if (this.serviceList.length === 0 && isFiltering) {
							uni.showToast({
								title: '没有找到匹配的客服记录',
								icon: 'none',
								duration: 2000
							});
						} 
						// 如果有筛选条件且有结果，显示找到的数量
						else if (isFiltering && this.serviceList.length > 0) {
							uni.showToast({
								title: `找到 ${this.pagination.total} 条匹配记录`,
								icon: 'none',
								duration: 1500
							});
						}
					}
					
					uni.hideLoading();
				} catch (error) {
					uni.hideLoading();
					
					// 更详细的错误信息处理
					let errorMsg = '加载客服列表失败';
					if (error && error.response) {
						if (error.response.status === 404) {
							errorMsg += '：API接口不存在';
						} else if (error.response.data && error.response.data.message) {
							errorMsg += '：' + error.response.data.message;
						}
					} else if (error && error.message) {
						errorMsg += '：' + error.message;
					} else {
						errorMsg += '：请检查网络连接和服务器状态';
					}
					
					console.error('加载失败详情:', error);
					
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 3000
					});
				}
			},
			
			// 防抖搜索
			debounceSearch() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				this.searchTimer = setTimeout(() => {
					this.searchNow();
				}, 500);
			},
			
			// 立即搜索
			searchNow() {
				console.log('执行立即搜索, 关键词:', this.searchKeyword);
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				
				// 重置到第一页
				this.pagination.current = 1;
				this.loadServicePage();
			},
			
			// 设置客服类型筛选
			setServiceType(type) {
				console.log('设置客服类型筛选前:', this.serviceType);
				// 如果点击了已经选中的类型，则取消筛选
				if (this.serviceType === type && type !== '') {
					this.serviceType = '';
					console.log('取消筛选，设置为空字符串');
				} else {
					this.serviceType = type;
					console.log('设置筛选类型为:', type);
				}
				
				// 重置到第一页
				this.pagination.current = 1;
				console.log('筛选后的类型值:', this.serviceType);
				this.loadServicePage();
			},
			
			// 切换分页
			changePage(page) {
				if (page < 1 || page > this.pagination.pages) {
					return;
				}
				this.pagination.current = page;
				this.loadServicePage();
			},
			
			// 获取分页显示的页码范围
			getPageNumbers() {
				const { current, pages } = this.pagination;
				if (pages <= 5) {
					return Array.from({ length: pages }, (_, i) => i + 1);
				}
				
				if (current <= 3) {
					return [1, 2, 3, 4, 5];
				}
				
				if (current >= pages - 2) {
					return [pages - 4, pages - 3, pages - 2, pages - 1, pages];
				}
				
				return [current - 2, current - 1, current, current + 1, current + 2];
			},
			
			// 获取状态样式类名
			getStatusClass(status) {
				switch(status) {
					case 'ONLINE': return 'status-online';
					case 'OFFLINE': return 'status-offline';
					case 'BUSY': return 'status-busy';
					default: return '';
				}
			},
			
			// 获取状态显示文本
			getStatusText(status) {
				switch(status) {
					case 'ONLINE': return '在线';
					case 'OFFLINE': return '离线';
					case 'BUSY': return '忙碌';
					default: return status;
				}
			},
			
			// 解析技能标签列表
			getSkillList(skills) {
				if (!skills) return [];
				return skills.split(',').filter(skill => skill.trim());
			},
			
			// 显示创建客服模态框
			showCreateServiceModal() {
				this.isEdit = false;
				this.formData = {
					id: null,
					serviceCode: '',
					serviceType: 'HUMAN',
					maxConcurrent: 5,
					groupId: '',
					skills: '',
					userId: ''
				};
				this.showModal = true;
			},
			
			// 编辑客服信息
			editService(service) {
				this.isEdit = true;
				this.formData = {
					id: service.id,
					serviceCode: service.serviceCode,
					serviceType: service.serviceType,
					maxConcurrent: service.maxConcurrent,
					groupId: service.groupId || '',
					skills: service.skills || '',
					userId: service.userId
				};
				this.originalFormData = JSON.parse(JSON.stringify(this.formData));
				this.showModal = true;
			},
			
			// 切换客服状态
			async toggleServiceStatus(service) {
				try {
					console.log('Service object:', service);
					if (!service || (!service.id && !service.serviceId)) {
						console.error('Invalid service object:', service);
						uni.showToast({
							title: '无效的客服ID',
							icon: 'none'
						});
						return;
					}
					const serviceId = service.serviceId || service.id;
					console.log('Using serviceId:', serviceId);
					const newStatus = service.serviceStatus === 'ONLINE' ? 'OFFLINE' : 'ONLINE';
					console.log('Updating status to:', newStatus);
					
					await api.customerService.updateServiceStatus(serviceId, newStatus);
					
					// 刷新列表
					this.loadServicePage();
					
					uni.showToast({
						title: '状态更新成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('更新客服状态失败：', error);
					console.error('Error details:', {
						message: error.message,
						response: error.response?.data
					});
					uni.showToast({
						title: '更新客服状态失败：' + (error.message || '未知错误'),
						icon: 'none',
						duration: 3000
					});
				}
			},
			
			// 确认删除客服
			async confirmDeleteService(service) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除客服 ${service.serviceCode} 吗？`,
					success: async (res) => {
						if (res.confirm) {
							await this.deleteService(service.id);
						}
					}
				});
			},
			
			// 删除客服
			async deleteService(serviceId) {
				try {
					await api.customerService.deleteService(serviceId);
					
					// 重新加载客服列表
					this.loadServicePage();
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('删除客服失败：', error);
					uni.showToast({
						title: '删除客服失败',
						icon: 'none'
					});
				}
			},
			
			// 取消模态框
			cancelModal() {
				this.showModal = false;
				this.formData = {
					id: null,
					serviceCode: '',
					serviceType: 'HUMAN',
					maxConcurrent: 5,
					groupId: '',
					skills: '',
					userId: ''
				};
			},
			
			// 提交表单
			async submitForm() {
				// 表单验证
				if (!this.formData.serviceCode) {
					uni.showToast({
						title: '请输入客服工号',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.userId) {
					uni.showToast({
						title: '请输入关联用户ID',
						icon: 'none'
					});
					return;
				}
				
				try {
					// 如果没有选择客服分组，自动创建一个默认分组
					if (!this.formData.groupId && this.groupList.length === 0) {
						try {
							const defaultGroup = {
								groupName: '默认分组',
								description: '系统自动创建',
								priority: 1,
								status: 'ACTIVE'
							};
							
							const groupResponse = await api.customerService.createGroup(defaultGroup);
							if (groupResponse && groupResponse.data) {
								this.formData.groupId = groupResponse.data.id;
							}
						} catch (groupError) {
							console.error('创建默认分组失败：', groupError);
						}
					}
					
					const actionText = this.isEdit ? '更新' : '创建';
					
					uni.showLoading({
						title: `${actionText}中...`,
						mask: true
					});
					
					if (this.isEdit) {
						// 更新客服信息
						await api.customerService.updateService(this.formData.id, this.formData);
					} else {
						// 创建客服
						await api.customerService.createService(this.formData);
					}
					
					uni.hideLoading();
					uni.showToast({
						title: `${actionText}成功`,
						icon: 'success'
					});
					
					this.cancelModal();
					// 重新加载客服列表
					this.loadServicePage();
				} catch (error) {
					uni.hideLoading();
					console.error(this.isEdit ? '更新客服失败：' : '创建客服失败：', error);
					
					// 显示更详细的错误信息
					let errorMsg = this.isEdit ? '更新客服失败' : '创建客服失败';
					if (error && error.response) {
						if (error.response.status === 404) {
							errorMsg += '：API接口不存在';
						} else if (error.response.data && error.response.data.message) {
							errorMsg += '：' + error.response.data.message;
						}
					} else if (error && error.message) {
						errorMsg += '：' + error.message;
					} else {
						errorMsg += '：服务器异常';
					}
					
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 3000
					});
				}
			},
			
			// 加载分组列表
			async loadGroupList() {
				try {
					const response = await api.customerService.getAllGroups();
					if (response && response.data) {
						this.groupList = response.data;
					}
				} catch (error) {
					console.error('加载客服分组失败：', error);
					uni.showToast({
						title: '加载客服分组失败',
						icon: 'none'
					});
				}
			},
			
			// 获取选择的分组名称
			getSelectedGroupName() {
				if (!this.formData.groupId) return '';
				const group = this.groupList.find(g => g.id == this.formData.groupId);
				return group ? group.groupName : '';
			},
			
			// 获取当前选择分组的索引
			getGroupIndex() {
				if (!this.formData.groupId) return 0;
				const index = this.groupList.findIndex(g => g.id == this.formData.groupId);
				return index > -1 ? index : 0;
			},
			
			// 分组选择事件
			onGroupChange(e) {
				const index = e.detail.value;
				if (this.groupList[index]) {
					this.formData.groupId = this.groupList[index].id;
				}
			},
			
			// 创建新分组
			async createNewGroup() {
				if (!this.newGroupName) {
					uni.showToast({
						title: '请输入分组名称',
						icon: 'none'
					});
					return;
				}
				
				try {
					const groupData = {
						groupName: this.newGroupName,
						description: '自动创建',
						priority: 1,
						status: 'ACTIVE'
					};
					
					const response = await api.customerService.createGroup(groupData);
					if (response && response.data) {
						// 刷新分组列表
						await this.loadGroupList();
						
						// 设置新创建的分组为当前选择
						this.formData.groupId = response.data.id;
						
						// 重置并隐藏表单
						this.newGroupName = '';
						this.showGroupSelector = false;
						
						uni.showToast({
							title: '分组创建成功',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('创建分组失败：', error);
					uni.showToast({
						title: '创建分组失败',
						icon: 'none'
					});
				}
			},
			
			// 加载用户列表
			async loadUserList(keyword = '') {
				try {
					const params = {
						keyword: keyword || '',
						current: 1,
						pageSize: 30
					};
					
					const response = await api.user.getUserList(params);
					if (response && response.data && response.data.records) {
						this.userList = response.data.records;
					}
				} catch (error) {
					console.error('加载用户列表失败:', error);
					uni.showToast({
						title: '加载用户列表失败',
						icon: 'none'
					});
				}
			},
			
			// 刷新用户列表
			refreshUserList() {
				this.loadUserList();
				this.showUserSelector = true;
			},
			
			// 搜索用户
			debounceUserSearch() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				this.searchTimer = setTimeout(() => {
					this.searchUsers();
				}, 500);
			},
			
			// 执行用户搜索
			searchUsers() {
				console.log('搜索用户:', this.searchUserKeyword);
				this.loadUserList(this.searchUserKeyword);
			},
			
			// 选择用户
			selectUser(user) {
				this.formData.userId = user.id;
				this.showUserSelector = false;
			},
			
			// 获取用户显示名称
			getUserDisplayName() {
				if (!this.formData.userId) return '';
				const user = this.userList.find(u => u.id === this.formData.userId);
				return user ? `${user.username} (${user.email})` : this.formData.userId;
			},
			
			// 获取用户头像初始字母
			getUserInitials(user) {
				if (!user || !user.username) return '?';
				return user.username.charAt(0).toUpperCase();
			},
			
			// 清除搜索
			clearSearch() {
				console.log('清除搜索前, 关键词:', this.searchKeyword);
				this.searchKeyword = '';
				console.log('清除搜索后, 关键词:', this.searchKeyword);
				// 重置到第一页并重新加载数据
				this.pagination.current = 1;
				this.loadServicePage();
			},
			
			debounceGroupSearch() {
				if (this.searchTimer) clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.searchGroupKeyword = this.searchGroupKeyword;
				}, 300);
			},
			
			selectGroup(group) {
				this.formData.groupId = group.id;
				this.showGroupSelector = false;
			},
			
			// 显示创建分组模态框
			showCreateGroupModal() {
				this.showCreateGroupModal = true;
			},
			
			// 取消创建分组
			cancelCreateGroup() {
				this.showCreateGroupModal = false;
				this.newGroupForm = {
					groupName: '',
					description: '',
					priority: 1
				};
			},
			
			// 提交创建分组
			async submitCreateGroup() {
				if (!this.newGroupForm.groupName) {
					uni.showToast({
						title: '请输入分组名称',
						icon: 'none'
					});
					return;
				}
				
				try {
					uni.showLoading({
						title: '创建中...',
						mask: true
					});
					
					// 添加状态字段
					const groupData = {
						...this.newGroupForm,
						status: 'ACTIVE'  // 添加状态字段
					};
					
					console.log('Creating group with data:', groupData);
					const response = await api.customerService.createGroup(groupData);
					
					if (response && response.data) {
						// 刷新分组列表
						await this.loadGroupList();
						
						// 如果当前正在创建客服，自动选择新创建的分组
						if (this.showModal && !this.isEdit) {
							this.formData.groupId = response.data.id;
						}
						
						// 关闭模态框
						this.cancelCreateGroup();
						
						uni.hideLoading();
						uni.showToast({
							title: '创建分组成功',
							icon: 'success'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('创建分组失败：', error);
					
					let errorMsg = '创建分组失败';
					if (error.response?.data?.message) {
						errorMsg += '：' + error.response.data.message;
					} else if (error.message) {
						errorMsg += '：' + error.message;
					}
					
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 3000
					});
				}
			}
		}
	}
</script>

<style>
	.customer-service-list {
		padding: 8px;
	}
	
	/* 操作栏样式 */
	.action-bar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		padding: 16px 24px;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10px);
	}
	
	/* 筛选栏样式 */
	.filter-bar {
		display: flex;
		margin-bottom: 24px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
		padding: 12px 24px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	}
	
	.filter-item {
		display: flex;
		align-items: center;
		margin-right: 24px;
	}
	
	.filter-label {
		font-size: 14px;
		color: #666;
		margin-right: 8px;
	}
	
	.filter-options {
		display: flex;
		gap: 10px;
	}
	
	.filter-option {
		padding: 5px 14px;
		font-size: 13px;
		border-radius: 20px;
		background-color: rgba(255, 255, 255, 0.6);
		color: #666;
		cursor: pointer;
		transition: all 0.2s;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
	}
	
	.filter-option:hover {
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
	}
	
	.filter-option.active {
		background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
		color: white;
		box-shadow: 0 3px 8px rgba(4, 190, 254, 0.2);
	}
	
	/* 分页样式 */
	.pagination {
		margin-top: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	}
	
	.pagination-info {
		margin-bottom: 12px;
		font-size: 14px;
		color: #666;
	}
	
	.pagination-buttons {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	
	.pagination-btn {
		padding: 6px 12px;
		font-size: 12px;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		color: #666;
		border-radius: 6px;
	}
	
	.pagination-btn:not(.disabled):hover {
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
	}
	
	.pagination-btn.disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	
	.page-number {
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		font-size: 14px;
		background-color: rgba(255, 255, 255, 0.6);
		color: #666;
		cursor: pointer;
		transition: all 0.2s;
	}
	
	.page-number:hover {
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
	}
	
	.page-number.active {
		background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
		color: white;
		box-shadow: 0 3px 8px rgba(4, 190, 254, 0.2);
	}
	
	.btn {
		padding: 10px 20px;
		border: none;
		border-radius: 50px;
		cursor: pointer;
		font-size: 14px;
		transition: all 0.3s;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}
	
	.btn::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.1);
		transform: translateX(-100%);
		transition: transform 0.4s ease-out;
		z-index: 1;
	}
	
	.btn:hover::after {
		transform: translateX(0);
	}
	
	.btn-primary {
		background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
		color: white;
	}
	
	.btn-primary:hover {
		box-shadow: 0 5px 15px rgba(4, 190, 254, 0.3);
		transform: translateY(-2px);
	}
	
	.btn-default {
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		color: #333;
	}
	
	.btn-default:hover {
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		transform: translateY(-2px);
	}
	
	.btn-success {
		background: linear-gradient(135deg, #52c41a 0%, #78e636 100%);
		color: white;
	}
	
	.btn-success:hover {
		box-shadow: 0 5px 15px rgba(82, 196, 26, 0.3);
		transform: translateY(-2px);
	}
	
	.btn-warning {
		background: linear-gradient(135deg, #faad14 0%, #ffcb52 100%);
		color: white;
	}
	
	.btn-warning:hover {
		box-shadow: 0 5px 15px rgba(250, 173, 20, 0.3);
		transform: translateY(-2px);
	}
	
	.btn-delete {
		background: linear-gradient(135deg, #ff4d4f 0%, #ff8686 100%);
		color: white;
	}
	
	.btn-delete:hover {
		box-shadow: 0 5px 15px rgba(255, 77, 79, 0.3);
		transform: translateY(-2px);
	}
	
	.btn-edit {
		background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
		color: white;
	}
	
	.btn-small {
		padding: 6px 12px;
		font-size: 12px;
		margin-right: 6px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 30px;
		padding: 0 10px;
		height: 40px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		position: relative;
	}
	
	.search-box input {
		flex: 1;
		border: none;
		background: transparent;
		outline: none;
		font-size: 14px;
		padding: 0 8px;
	}
	
	.search-btn {
		color: #4481eb;
		font-size: 14px;
		cursor: pointer;
		margin-left: 8px;
	}
	
	.clear-btn {
		color: #F56C6C;
		font-size: 18px;
		cursor: pointer;
		margin-left: 8px;
	}
	
	/* 表格样式 */
	.service-table {
		width: 100%;
		background-color: white;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
	}
	
	.table-header {
		display: flex;
		background: linear-gradient(to right, #f5f7fa, #e4e8f0);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.th {
		padding: 16px 12px;
		text-align: left;
		font-weight: 600;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.tr {
		display: flex;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		transition: all 0.2s;
	}
	
	.tr:hover {
		background-color: rgba(4, 190, 254, 0.03);
	}
	
	.tr:last-child {
		border-bottom: none;
	}
	
	.td {
		padding: 16px 12px;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.status-badge {
		display: inline-block;
		padding: 4px 12px;
		border-radius: 30px;
		font-size: 12px;
		font-weight: 500;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}
	
	.status-online {
		background: linear-gradient(135deg, #e8f7ee 0%, #d3f5e1 100%);
		color: #00a854;
	}
	
	.status-offline {
		background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
		color: #999;
	}
	
	.status-busy {
		background: linear-gradient(135deg, #fff3e8 0%, #ffe8cc 100%);
		color: #fa8c16;
	}
	
	.skill-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	
	.skill-tag {
		background-color: rgba(4, 190, 254, 0.1);
		color: #4481eb;
		padding: 4px 10px;
		border-radius: 20px;
		font-size: 12px;
		transition: all 0.2s;
	}
	
	.skill-tag:hover {
		background-color: rgba(4, 190, 254, 0.2);
		transform: translateY(-2px);
	}
	
	.action-btns {
		display: flex;
		gap: 6px;
	}
	
	/* 模态框样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: fadeIn 0.3s ease-out;
	}
	
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	
	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(3px);
	}
	
	.modal-content {
		position: relative;
		width: 90%;
		max-width: 500px;
		background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		animation: slideUp 0.4s ease-out;
		overflow: hidden;
	}
	
	@keyframes slideUp {
		from { transform: translateY(30px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}
	
	.modal-header {
		padding: 20px 24px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(to right, #ffffff, #f5f7fa);
	}
	
	.modal-title {
		font-size: 20px;
		font-weight: 600;
		color: #333;
		position: relative;
	}
	
	.modal-title::after {
		content: '';
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 40px;
		height: 3px;
		background: linear-gradient(90deg, #4481eb, #04befe);
		border-radius: 3px;
	}
	
	.modal-close {
		font-size: 24px;
		color: #999;
		cursor: pointer;
		transition: all 0.3s;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	
	.modal-close:hover {
		color: #333;
		background-color: rgba(0, 0, 0, 0.05);
		transform: rotate(90deg);
	}
	
	.modal-body {
		padding: 24px;
		overflow-y: auto;
		max-height: 60vh;
	}
	
	.modal-footer {
		padding: 16px 24px;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		background: linear-gradient(to right, #f5f7fa, #ffffff);
	}
	
	/* 表单样式 */
	.form-item {
		margin-bottom: 20px;
	}
	
	.form-label {
		margin-bottom: 10px;
		font-size: 14px;
		color: #333;
		font-weight: 500;
	}
	
	.form-input {
		width: 100%;
		height: 42px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: 0 16px;
		font-size: 14px;
		transition: all 0.3s;
		background-color: rgba(255, 255, 255, 0.8);
	}
	
	.form-input:focus {
		border-color: #04befe;
		box-shadow: 0 0 0 3px rgba(4, 190, 254, 0.1);
		outline: none;
	}
	
	.form-radio-group {
		display: flex;
		gap: 12px;
		margin-top: 8px;
	}
	
	.form-radio {
		display: flex;
		align-items: center;
		padding: 8px 16px;
		background-color: #f5f7fa;
		border: 1px solid #e4e8f0;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.form-radio.active {
		background-color: #e8f0fe;
		border-color: #4481eb;
	}
	
	.form-radio:hover {
		background-color: #e8f0fe;
	}
	
	.form-radio text {
		margin-left: 8px;
		color: #666;
		font-size: 14px;
	}
	
	.form-radio.active text {
		color: #4481eb;
	}
	
	/* 隐藏原生radio的默认样式 */
	.form-radio radio {
		transform: scale(0.8);
	}
	
	.empty-row {
		text-align: center;
		color: #999;
		padding: 32px 0;
		font-size: 14px;
	}
	
	/* 客服分组选择样式 */
	.form-select {
		display: flex;
		align-items: center;
		width: 100%;
		position: relative;
	}
	
	.picker-view {
		flex: 1;
		height: 42px;
		line-height: 42px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: 0 16px;
		font-size: 14px;
		background-color: rgba(255, 255, 255, 0.8);
		transition: all 0.3s;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}
	
	.add-group-btn {
		margin-left: 10px;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		font-size: 18px;
		line-height: 1;
	}
	
	/* 内嵌表单样式 */
	.inline-form {
		margin-top: 10px;
		padding: 12px;
		background-color: rgba(0, 0, 0, 0.03);
		border-radius: 8px;
		border: 1px solid rgba(0, 0, 0, 0.08);
	}
	
	.inline-form-title {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 8px;
		color: #333;
	}
	
	.inline-form-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
		gap: 8px;
	}
	
	.picker-view:active {
		background-color: rgba(0, 0, 0, 0.05);
	}
	
	/* 用户选择器样式 */
	.user-selector {
		width: 90%;
		max-width: 500px;
		max-height: 80vh;
	}
	
	.user-list {
		margin-top: 15px;
		max-height: 50vh;
		overflow-y: auto;
	}
	
	.user-item {
		display: flex;
		padding: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		cursor: pointer;
		transition: all 0.2s;
	}
	
	.user-item:hover {
		background-color: rgba(4, 190, 254, 0.05);
	}
	
	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: bold;
		margin-right: 12px;
	}
	
	.user-info {
		flex: 1;
	}
	
	.user-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}
	
	.user-email {
		font-size: 13px;
		color: #666;
		margin-top: 4px;
	}
	
	.empty-message {
		text-align: center;
		padding: 20px;
		color: #999;
		font-style: italic;
	}
	
	.search-btn {
		position: absolute;
		right: 0;
		top: 0;
		background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
		color: #fff;
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
		border-radius: 0 50px 50px 0;
		cursor: pointer;
		transition: all 0.2s;
	}
	
	.search-btn:hover {
		background: linear-gradient(135deg, #3a70d6 0%, #039be5 100%);
	}
	
	.user-search-box {
		width: 100%;
		margin-bottom: 15px;
	}
	
	.group-selector {
		max-width: 400px;
	}
	
	.group-list {
		margin-top: 10px;
		max-height: 200px;
		overflow-y: auto;
	}
	
	.group-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}
	
	.group-item:hover {
		background: #f0f7ff;
	}
	
	.group-actions {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
	}
	
	.add-group-btn {
		flex-shrink: 0;
		height: 36px;
	}
	
	.form-textarea {
		width: 100%;
		min-height: 80px;
		padding: 8px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		resize: vertical;
	}
	
	.group-list {
		max-height: 300px;
		overflow-y: auto;
	}
	
	.group-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}
	
	.group-item:hover {
		background-color: #f5f7fa;
	}
</style> 